<script setup lang="ts">
import { onMounted } from "vue";

type Prop = {
  default?: any;
};

const props = defineProps<Prop>();
const emits = defineEmits(["change"]);
const model = defineModel<any>();

const onChange = (val: any) => {
  emits("change", val);
};

onMounted(() => {
  if (props.default && !model.value) {
    model.value = props.default;
    onChange(props.default);
  }
});
</script>

<template>
  <el-segmented
    v-bind="$attrs"
    v-model="model"
    class="custom-segment"
    @change="onChange"
  />
</template>
<style lang="scss" scoped>
.custom-segment {
  --el-segmented-item-selected-color: var(--el-fill-color-light);
  --el-segmented-item-selected-bg-color: var(--el-color-primary);
  --el-border-radius-base: 16px;
  border: var(--el-border);
}
</style>
